<html>
  <head>
    <title>Grid网格</title>
    <style lang="text/css">
      * {
        box-sizing: border-box;
      }
      .wrapper {
        border: 2px solid #f76707;
        border-radius: 5px;
        background-color: #fff4e6;
      }
      .wrapper > div {
        border: 2px solid #ffa94d;
        border-radius: 5px;
        background-color: #ffd8a8;
        padding: 1em;
        color: #d9480f;
      }
      .wrapper {
        display: grid;
        grid-template-columns: repeat(12, [col-start] 1fr);
        grid-gap: 20px;
      }
      .item1 {
        grid-column:  col-start / span 3;
      }
      .item2 {
        grid-column:  col-start 6 / span 4;
        grid-row: 1 / 3;
      }
      .item3 {
        grid-column:  col-start 2 / span 2;
        grid-row: 2;
      }
      .item4 {
        grid-column: col-start 3 / -1;
        grid-row: 3;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="item1">Start column line 1, span 3 column tracks.</div>
      <div class="item2">
        Start column line 6, span 4 column tracks. 2 row tracks.
      </div>
      <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
      <div class="item4">
        Start at column line 3, span to the end of the grid (-1).
      </div>
    </div>
  </body>
</html>
